<template>
	<view>
		<view class="add-product">
			<view class="product-input">
				<view class="title">商品名：</view>
				<input type="text" v-model="productName" placeholder="请输入商品名" placeholder-class="placeholderClass"/>
			</view>
			<view class="product-input">
				<view class="title">销售单位：</view>
				<input type="text" v-model="saleUnit" placeholder="请输入销售单位(如：盒/瓶)" placeholder-class="placeholderClass"/>
			</view>
			<view class="product-input">
				<view class="title">销售价格：</view>
				<input type="text" v-model="salePrice" placeholder="请输入销售价格" placeholder-class="placeholderClass"/>
			</view>
			<view class="product-input">
				<view class="title">代购价格：</view>
				<input type="text" v-model="bookPrice" placeholder="请输入代购价格" placeholder-class="placeholderClass"/>
			</view>
			<view class="product-input">
				<view class="title">商品主图：</view>
				<view class="primary-img">
					<view class="add-icon" @click="addPrimaryImg(1)">
						<image src="../../../static/jia.png" lazy-load></image>
					</view>
					<view class="showImage">
						<view v-if="primaryImg !== ''" @click="deleteImg(0,1)" class="icon iconfont icon-icon--shanchu"></view>
						<image :src="primaryImg" lazy-load></image>
					</view>
				</view>
			</view>
			<view class="product-input">
				<view class="title">添加更多图片：</view>
				<view class="primary-img">
					<view class="add-icon" @click="addPrimaryImg(9)">
						<image src="../../../static/jia.png" lazy-load></image>
					</view>
					<block v-for="(item,index) in otherImgs" :key="index">
						<view class="showImage">
							<view v-if="otherImgs.length>0 && item.is_primary === 0" @click="deleteImg(index,0)" class="icon iconfont icon-icon--shanchu"></view>
							<image v-if="item.is_primary === 0" :src="item.img_path" lazy-load></image>
						</view>
					</block>
				</view>
			</view>
			<view class="product-input">
				<view class="title">添加商品详情</view>
				<rich-editor @save="save"></rich-editor>
			</view>
			
			<view class="submit-btn">
				<button type="default" class="submit" @click="submit">确认新增</button>
			</view>
		</view>
	</view>
</template>

<script>
	import { addProduct } from "@/common/adminRequest.js"
	export default {
		data() {
			return {
				productName:"",
				saleUnit:"",
				salePrice:"",
				bookPrice:"",
				primaryImg:"",
				introduction:"",
				otherImgs:[]
			}
		},
		onLoad() {
			
		},
		methods: {
			async submit(){
				let { productName,saleUnit,salePrice,bookPrice,primaryImg,introduction,otherImgs } = this;
				if(!productName || !saleUnit || !salePrice || !bookPrice || !primaryImg || !introduction || otherImgs.length <= 0){
					uni.showToast({
						icon:"none",
						title: '请将信息填写完整！'
					});
					return;
				}
				
				let res = await addProduct({
					data:{
						product_name:productName,
						sale_unit:saleUnit,
						book_price:bookPrice,
						sale_price:salePrice,
						primary_img:primaryImg,
						introduction,
						otherImgs
					}
				});
				if(res.code === 0){
					uni.showToast({
						title: '上传成功'
					});
					Object.assign(this.$data,this.$options.data());  // 初始化data
					uni.navigateBack();
				}
			},
			addPrimaryImg(imgNum){
				uni.chooseImage({
					count:imgNum,
					success:(res) => {
						if(res.tempFilePaths.length > 0){
							this.uploadFile(res.tempFilePaths)
						}
					}
				})
			},
			// 上传
			uploadFile(files){
				files.forEach(path=>{
					uniCloud.uploadFile({
					    filePath: path
					}).then(data=>{
						if(data.success){
							if(files.length === 1){ // 单个(主图)
								this.primaryImg = data.fileID
							}
							this.otherImgs.push({
								img_path: data.fileID,
								is_primary: files.length === 1 ? 1 : 0
							})
						} else {
							return Promise.reject(new Error("稍后重试！"))
						}
					}).catch(err=>{
						uni.showToast({
							icon:"none",
							title: '上传失败，稍后重试'
						});
					})
				})
			},
			// 删除
			deleteImg(index,type){
				let fileList = [];
				if(type === 1){  // 删除主图
					fileList.push(this.primaryImg);
				}
				fileList.push(this.otherImgs[index].img_path);
				uniCloud.deleteFile({
					fileList
				}).then(res=>{
					if(res.success){
						if(type === 1){
							this.primaryImg = "";
						}
						this.otherImgs.splice(index,1);
					} else {
						return Promise.reject(new Error("稍后重试！"))
					}
				}).catch(err=>{
					uni.showToast({
						icon:"none",
						title: '删除失败，稍后重试'
					});
				})
			},
			// 商品详情
			save(e){
				let b = Buffer.from(e.html,"utf8");
				this.introduction = b.toString("base64");
				uni.showToast({
					title: '已保存……'
				});
			}
		}
	}
</script>

<style lang="scss">
	.add-product{
		padding: 20rpx;
	}
	.placeholderClass{
		font-size: 26rpx;
	}
	.product-input{
		padding: 10rpx 0;
		background: #f5f5f5;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		&:hover{
			box-shadow: 0 0 18rpx #ccc;
		}
		.title{
			font-size: 32rpx;
			font-weight: bold;
			padding: 0 10rpx;
			margin-bottom: 10rpx;
		}
	}
	
	.primary-img{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		.add-icon{
			padding: 38rpx;
			background: #FFFFFF;
			margin-left: 10rpx;
			image{
				width: 100rpx;
				height: 100rpx;
			}
		}
		.showImage{
			margin-left: 30rpx;
			margin-top: 10rpx;
			position: relative;
			.iconfont{
				position: absolute;
				top: -20rpx;
				right: -20rpx;
				color: red;
			}
			image{
				width: 180rpx;
				height: 180rpx;
			}
		}
	}
	.submit{
		margin-top: 40rpx;
		background-color: #fa436a !important;
		color: #FFFFFF !important;
		&::before{
			border: 0;
		}
	}
</style>
